<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>{{title}}</span>
      </div>
      <div class="div">
        <span class="solid" @click="Delete" v-show="isEdit == 1 && id && id !== 0">删除</span>
      </div>
    </header>
    <div class="biaoqian" style="display: flex;justify-content: space-between" v-show="isEdit == 0">
      <span style="display: flex;align-items: center">
        <a class="hengGang"></a>归属
      </span>
      <span style="margin-right: 15px">
        {{ allData.group_name }}
      </span>
    </div>
    <div class="biaoqian" v-show="isEdit !== 0">
      <a class="hengGang"></a>审核名称
    </div>
    <div style="background: #FFFFFF;padding-bottom: 10px;box-sizing: border-box" v-show="isEdit !== 0">
      <div class="textareaDiv">
        <textarea :readonly="isEdit == 0" v-model="assesschain_name" name="" maxlength="20" id="" cols="30" rows="10"></textarea>
        <span style="display: flex;justify-content: flex-end;margin-right: 10px">{{assesschain_name ? assesschain_name.length : 0}}/20</span>
      </div>
    </div>
    <div class="biaoqian" style="margin-bottom: 10px">
      <a class="hengGang"></a>审核流程
    </div>
    <div style="min-height: calc(100vh - 336px);">
      <div class="boxDiv" v-for="(item, index) in list" :key="index">
        <div class="box">
          <span >
           <img v-show="index!==0 && isEdit !== 0"  @click.stop="clickDelete(item, index)" style="width: 40px;
            height: 40px;
            margin-right: 10px;"
                src="../../../../assets/审核链/减.png" alt="">第{{index+1}}级审批人
          </span>
          <span>
            <input @click="run(item, index)" readonly v-model="item.value" placeholder="请选择审批人"
                   style="width:100px;margin-right: 5px;border: none;text-align: right" type="text">
            <img v-show="isEdit !== 0" style="width: 7px;height: 13px;" src="../../../../assets/更多黑@2x.png" alt="">
          </span>
        </div>
        <div style="display: flex;justify-content: center" v-show="index < list.length-1">
          <img style="height: 40px;" src="../../../../assets/箭头.png" alt="">
        </div>
<!--        <div style="margin: 0 auto;width: 1px;height: 15px; background: darkgray;"  v-show="isEdit !== 0"></div>-->
<!--        <div style="margin: 0 auto;width: 1px;height: 30px; background: darkgray;"  v-show="isEdit == 0 && index < list.length-1 "></div>-->
<!--        <div style="display: flex;justify-content: center" v-show="isEdit !== 0">-->
<!--          <img @click.stop="add(item, index)" style="width: 40px;height: 40px;" src="../../../../assets/审核链/加.png" alt="">-->
<!--        </div>-->

<!--        <div style="margin: 0 auto;width: 1px;height: 15px; background: darkgray;" v-show="index < list.length-1 "></div>-->
<!--        <div style="display: flex;justify-content: center" v-show="index < list.length-1">-->
<!--          <img style="width: 16px;height: 10px;" src="../../../../assets/gengduo.png" alt="">-->
<!--        </div>-->
      </div>
    </div>
    <div class="keepDiv" v-show="isEdit !== 0">
      <button class="keepBtn" @click="keep">保存</button>
    </div>
    <van-dialog v-model="deleteShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认删除本次审核吗？"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="deleteShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认保存本次审核吗？"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'JudgeAdd',
  data () {
    return {
      list: [
        {
          value: '',
          doc_user_id: ''
        }
      ],
      team_id: this.$route.query.team_id,
      userid: this.$route.query.userid,
      id: this.$route.query.id,
      isEdit: Number(this.$route.query.isEdit),
      assesschain_name: '',
      deleteShow: false,
      allData: []
    }
  },
  computed: {
    title () {
      if (this.isEdit === 1 && this.id && this.id !== 0) {
        document.title = '编辑'
        return '编辑'
      } else if (this.isEdit == 0) {
        document.title = '审核链预览'
        return '审核链预览'
      } else {
        document.title = '新增'
        return '新增'
      }
    }
  },
  mounted () {
    let data = JSON.parse(sessionStorage.getItem('JuageData'))
    if (data) {
      if (data.list) {
        this.list = data.list
      }
      this.assesschain_name = data.assesschain_name
    } else {
      if (this.id && this.id !== 0) {
        this.getHis()
      }
    }
    sessionStorage.removeItem('JuageData')
  },
  methods: {
    deleteConfirm () {
      this.$http.updateTeamassesschainDel({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('删除成功')
            this.back()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击删除
    Delete () {
      this.deleteShow = true
    },
    getHis () {
      this.$http.findOneTeamAssesschain({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.allData = res.data.data
            this.list = []
            data.Alist.map((curr, index) => {
              let obj = {
                value: curr.staff_name,
                doc_user_id: curr.doc_user_id
              }
              this.list.push(obj)
            })
            this.assesschain_name = data.assesschain_name
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    keep () {
      if (this.list.length < 2) {
        this.$toast('请至少选择两位审批人在您的审核链中')
        return false
      }
      let Alist = []
      let isTrue = true
      this.list.map((curr, index) => {
        let obj = {
          doc_user_id: curr.doc_user_id,
          assesschain_index: index
        }
        Alist.push(obj)
        if (!curr.doc_user_id) {
          isTrue = false
          return false
        }
      })
      if (isTrue === false) {
        this.$toast('审批人不能为空')
        return false
      }
      let obj = {
        id: 0,
        team_id: this.team_id,
        assesschain_name: this.assesschain_name,
        Alist: Alist
      }
      if (this.isEdit === 1 && this.id) {
        obj.id = this.id
      } else {
        obj.id = 0
      }
      this.$http.saveTeamAssesschain(obj)
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('保存成功')
            this.back()
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    run (item, index) {
      if (this.isEdit == 0) {

      } else {
        this.$router.push({path: '/SelectExaminer',
          query: {
            team_id: this.team_id,
            userid: this.userid
          }})
        let obj = {
          list: this.list,
          index: index,
          assesschain_name: this.assesschain_name
        }
        sessionStorage.setItem('JuageData', JSON.stringify(obj))
      }

    },
    // 删除审批人
    clickDelete (item, index) {
      if (this.isEdit == 0) {
      } else {
        this.list.splice(index, 1)
      }
    },
    // 新增审批人
    add (item, index) {
      if (this.isEdit == 0) {
      } else {
        let obj = {
          value: '',
          doc_user_id: ''
        }
        this.list.splice(index + 1, 0, obj)
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.biaoqian{
  display: flex;
  align-items: center;
  height: 44px;
  background: #FFFFFF;
  font-weight: bold;
}
.hengGang
{
  width: 2px;
  height: 15px;
  background: #1da4f2;
  margin: 0 5px 0 10px;
  display: block;
}

.textareaDiv{
  width: 90%;
  height: 70px;
  border-radius: 10px;
  border: 1px solid #999;
  margin: 0 auto;
  overflow: hidden;
}
.textareaDiv textarea{
  width: 100%;
  height: 65%;
  resize: none;
  border: none;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  color: #333333;
}
.box{
  width: 90%;
  height: 60px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}
.box span{
  display: flex;
  align-items: center;
}

.keepDiv{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
 .keepBtn{
  width: 90%;
  height: 44px;
  border-radius: 20px;
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
}
 /*.all .boxDiv:last-child{*/
 /*  margin-bottom: 50px;*/
 /*}*/
</style>
